import { forwardRef, useImperativeHandle, useRef } from "react"

interface Props {

}

const ContextMenu = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        showContextMenu
    }))

    const contextMenuOverlayRef = useRef<any>(null);
    const contextMenuContentRef = useRef<any>(null);

    const showContextMenu = (e) => {
        console.log("e", e)
        const { clientX, clientY } = e;
        contextMenuOverlayRef.current.className = 'context-menu-overlay show';
        contextMenuContentRef.current.style.top = clientY + 'px';
        contextMenuContentRef.current.style.left = clientX + 'px'
    }

    const onMouseDown = (e) => {
        contextMenuOverlayRef.current.className = 'context-menu-overlay';
        contextMenuContentRef.current.style.top = 0;
        contextMenuContentRef.current.style.left = 0;
        e.preventDefault();
        e.stopPropagation();
    }

    const handleHideContextMenu = (e) => {
        contextMenuOverlayRef.current.className = 'context-menu-overlay';
        contextMenuContentRef.current.style.top = 0;
        contextMenuContentRef.current.style.left = 0;
        e.preventDefault();
        e.stopPropagation();
    }

    return (
        <div
            ref={contextMenuOverlayRef}
            className="context-menu-overlay"
            onMouseDown={onMouseDown}
            onContextMenu={handleHideContextMenu}
        >
            <div
                ref={contextMenuContentRef}
                className="context-menu-content"
            >

            </div>
        </div>
    )
}

export default forwardRef(ContextMenu)